<template>
  <div :class="outsideMargin">
    <v-chip-group v-model="modelValue" multiple :mandatory="props.leastOne" class="pa-0 ma-0">
      <v-chip
        v-for="item in props.items"
        :key="`tag-chip-${item[`${props.itemValue}`]}`"
        :value="item[`${props.itemValue}`]"
        class="px-4 ma-0 mr-2 mt-2"
        style="padding-top: 0.38rem; padding-bottom: 0.38rem"
      >
        {{ props.needTranslate ? $t(item[`${props.itemLabel}`]) : item[`${props.itemLabel}`] }}
        <template #close v-if="item[`${props.itemCloseable}`]">
          <Icon name="close" @click="onClose(item)"></Icon>
        </template>
      </v-chip>
    </v-chip-group>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { VChip, VChipGroup } from 'vuetify/components'

const props = defineProps({
  modelValue: {
    type: Array,
    required: true,
  },
  items: {
    type: Array,
    required: true,
  },
  itemLabel: {
    type: String,
    default: 'label',
  },
  itemCloseable: {
    type: String,
    default: 'closable',
  },
  itemValue: {
    type: String,
    default: 'value',
  },
  leastOne: {
    type: Boolean,
    default: false,
  },
  needTranslate: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['update:modelValue', 'close:tag'])
const modelValue = computed({
  get: () => props.modelValue,
  set: (value) => emits('update:modelValue', value),
})
const onClose = (value) => {
  emits('close:tag', value)
}

const outsideMargin = computed(() => (props.items.length > 0 ? 'mt-2' : 'mt-4'))
</script>
<style scoped lang="scss">
::v-deep(.v-chip) {
  display: flex;
  padding: 0.375rem 1rem;
  justify-content: center;
  align-items: center;

  border-radius: 3.125rem;
  background: var(--bg-dialog, #333546);
  .v-chip__underlay {
    background: none;
  }

  .v-chip__content {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

::v-deep(.v-chip--selected) {
  background: var(--color-primary-gradient, linear-gradient(180deg, #f95e0e 0%, #e717b3 100%));
  .v-chip__overlay {
    opacity: 0 !important;
  }
}
</style>
